import React, { useState } from "react";
import PropTypes from "prop-types";
import Modal from "antd/lib/modal";
import Checkbox from "antd/lib/checkbox";
import Select from "antd/lib/select";
import InputNumber from "antd/lib/input-number";
import Input from "antd/lib/input";
import Tabs from "antd/lib/tabs";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import { Dashboard } from "@/services/dashboard";
import { policy } from "@/services/policy";
import { durationHumanize } from "@/lib/utils";
import FileButton from "@/components/portal/FileButton";

const { TabPane } = Tabs;

function EditDashboardDialog({ dialog, dashboard }) {
  const hide_parameters = dashboard.layout.hide_parameters;
  const hide_header = dashboard.layout.hide_header;
  const show_portal = dashboard.layout.show_portal;
  const [allowOverlap, setAllowOverlap] = useState(dashboard.layout.allowOverlap || false);
  const [isVerticalCompact, setIsVerticalCompact] = useState(dashboard.layout.isVerticalCompact || false);
  const [isHideScroll, setIsHideScroll] = useState(dashboard.layout.isHideScroll || false);
  const [isBreakpoints, setIsBreakpoints] = useState(dashboard.layout.isBreakpoints || false);
  const [designHeight, setDesignHeight] = useState(dashboard.layout.designHeight || window.innerHeight);
  const [margins, setMargins] = useState(dashboard.layout.margins || 0);
  const [isAccessCode, setIsAccessCode] = useState(dashboard.layout.isAccessCode || false);
  const [accessCode, setAccessCode] = useState(dashboard.layout.accessCode || '');
  const [isFobidSaveAs, setIsFobidSaveAs] = useState(dashboard.layout.isFobidSaveAs || false);
  const [colorStyleMode, setColorStyleMode] = useState(dashboard.layout.colorStyleMode || '');
  const [isHoldStyle, setIsHoldStyle] = useState(dashboard.layout.isHoldStyle || false);
  const [isFullScreen, setIsFullScreen] = useState(dashboard.layout.isFullScreen || false);
  const [refresh, setRefresh] = useState(dashboard.layout.refresh || '0');
  const [isHideRefresh, setIsHideRefresh] = useState(dashboard.layout.isHideRefresh || false);
  const [isTitleCenter, setIsTitleCenter] = useState(dashboard.layout.isTitleCenter || false);
  const [titleFontSize, setTitleFontSize] = useState((dashboard.layout && dashboard.layout.titleFontSize === 0) ? 0 : dashboard.layout.titleFontSize || 20);
  const [queriesMaxAge, setQueriesMaxAge] = useState(dashboard.layout.queriesMaxAge || '');
  const [affect, setAffect] = useState(dashboard.layout.affect || '');
  const [dashboardBg, setDashboardBg] = useState(dashboard.layout.dashboardBg || '');
  const [saveInProgress, setSaveInProgress] = useState(false);

  function save() {
    setSaveInProgress(true);
    var layout = {
      hide_parameters,
      hide_header,
      show_portal,
      allowOverlap,
      isVerticalCompact,
      isHideScroll,
      isBreakpoints,
      designHeight,
      designWidth : window.innerWidth,
      margins,
      isAccessCode,
      accessCode,
      isFobidSaveAs,
      colorStyleMode,
      isHoldStyle,
      isFullScreen,
      refresh,
      isHideRefresh,
      isTitleCenter,
      titleFontSize,
      queriesMaxAge,
      affect,
      dashboardBg,
    };
    Dashboard.save({ layout, id: dashboard.id }).then(data => {
      dialog.close();
      window.location.reload();
    });
  }

  return (
    <Modal
      {...dialog.props}
      maskClosable = {false}
      title="报表属性"
      okText="保存"
      cancelText="取消"
      okButtonProps={{
        disabled: saveInProgress,
        loading: saveInProgress,
        "data-test": "DashboardSaveButton",
      }}
      cancelButtonProps={{
        disabled: saveInProgress,
      }}
      onOk={save}
      closable={!saveInProgress}
    >
      <Tabs accordion defaultActiveKey={['TabSet']}>
        <TabPane tab="缩放" key="TabZoom">
          <Checkbox
            checked={allowOverlap}
            onChange={e => setAllowOverlap(e.target.checked)}
          >允许部件间重叠覆盖布局</Checkbox>
          <br/><br/>
          <Checkbox
            checked={isVerticalCompact}
            onChange={e => setIsVerticalCompact(e.target.checked)}
          >部件在高度方向上自动缩放，以适应窗口高度</Checkbox>
          <Checkbox
            checked={isHideScroll}
            onChange={e => setIsHideScroll(e.target.checked)}
          >禁止滚动条</Checkbox>
          <br/><br/>
          <Checkbox
            checked={isBreakpoints}
            disabled={!isVerticalCompact}
            onChange={e => setIsBreakpoints(e.target.checked)}
          >禁用断点（启用该功能部件无限压缩，不会自动换行）</Checkbox>
          <br/><br/>
          最佳模式时屏幕高度(像素)：
          <InputNumber
            defaultValue={designHeight}
            onChange={value => setDesignHeight(value)}
            // onPressEnter={save}
            disabled={!isVerticalCompact}
            autoFocus
          />
          <br/>
          (请调整窗口大小至无滚动条且显示效果最佳时，以便自动获取该值)
          <br/><br/>
          部件间距(像素)：
          <InputNumber style={{width:100}}
            value={margins} 
            onChange={value => setMargins(value)}
          />
        </TabPane>
        <TabPane tab="共享" key="TabShare">
          <Checkbox
            checked={isAccessCode}
            onChange={e => setIsAccessCode(e.target.checked)}
          >共享报表需要查看码：</Checkbox>
          <Input style={{ width: 90 }}
            defaultValue={accessCode}
            onChange={e => setAccessCode(e.target.value)}
            // onPressEnter={save}
            disabled={!isAccessCode}
            autoFocus
          />
          <br/><br/>
          <Checkbox
            checked={isFobidSaveAs}
            onChange={e => setIsFobidSaveAs(e.target.checked)}
          >共享报表禁止“另存”功能。</Checkbox>
          <br/><br/>
          <Checkbox
            checked={isTitleCenter}
            onChange={e => setIsTitleCenter(e.target.checked)}
          >共享报表标题居中。</Checkbox>&nbsp;&nbsp;
          字体大小：
          <InputNumber
            defaultValue={titleFontSize}
            onChange={value => setTitleFontSize(value)}
            disabled={!isTitleCenter}
            min={0}
            formatter={value => Number(value)}
            autoFocus
          />
        </TabPane>
        <TabPane tab="样式和刷新" key="TabStyle">
          报表个性背景：
          <Input type="text" style={{width:260}}
            value={dashboardBg}
            onChange={e => setDashboardBg(e.target.value)}
          />
          <FileButton doneEventHandler={setDashboardBg} position="center" />
          <br/>
          <a href="https://www.dazdata.com/docs/use/16.html" target="_blank" rel="noopener noreferrer">官网指南</a>
          例：url("/static/images/dark/bg.png") no-repeat center
          <br/><br/>      
          报表默认样式：
          <Select
            style={{width: 120}}
            defaultValue={colorStyleMode}
            onChange={value => setColorStyleMode(value)}
          >
            <Select.Option key=''>-无-</Select.Option>
            {policy.getDefaultStyles().map(({key, title}) => (
              <Select.Option key={key}>{title + ' ' + key}</Select.Option>
            ))}
          </Select>
          <br/>      
          <Checkbox
            checked={isHoldStyle}
            onChange={e => setIsHoldStyle(e.target.checked)}
          >锁定报表样式。</Checkbox>
          (不锁定时，仅在门户状态下亮白模式时使用默认样式)
          <br/><br/>
          <Checkbox
            checked={isFullScreen}
            onChange={e => setIsFullScreen(e.target.checked)}
          >默认全屏(仅门户模式有效)。</Checkbox>
          <br/><br/>
          自动刷新频率：
          <Select
            style={{width: 120}}
            defaultValue={refresh}
            onChange={value => setRefresh(value)}
          >
            <Select.Option key='0'>不自动刷新</Select.Option>
            {policy.getDashboardRefreshIntervals().map(option => (
              <Select.Option key={`${option}`}>{durationHumanize(option)}</Select.Option>
            ))}
          </Select>
          <br/><br/>
          <Checkbox
            checked={isHideRefresh}
            onChange={e => setIsHideRefresh(e.target.checked)}
          >禁止手动刷新。</Checkbox>
        </TabPane>
        <TabPane tab="特效" key="TabAffect">
          背景特效：
          <Select
            style={{width: 120}}
            defaultValue={affect}
            onChange={value => setAffect(value)}
          >
            <Select.Option key=''>-无-</Select.Option>
            <Select.Option key='particle'>粒子波浪</Select.Option>
            <Select.Option key='fireworks'>烟花</Select.Option>
            <Select.Option key='snowfall'>雪花</Select.Option>
            <Select.Option key='bubbles'>气泡</Select.Option>
          </Select>
        </TabPane>
        <TabPane tab="其它" key="TabOther">
          查询结果集缓存失效时间(秒)：
          <Input style={{ width: 90 }}
            defaultValue={queriesMaxAge}
            onChange={e => setQueriesMaxAge(e.target.value)}
            autoFocus
          />(为空时不失效直至强制刷新)
        </TabPane>
      </Tabs>
      <br/><br/>
    </Modal>
  );
}

EditDashboardDialog.propTypes = {
  dialog: DialogPropType.isRequired,
  id: PropTypes.number,
};

EditDashboardDialog.defaultProps = {
  id: 0,
};


export default wrapDialog(EditDashboardDialog);
